<template>
	<div id="player"></div>
</template>

<script lang="ts" setup>
	// declare function CloudRender():Object;
	// import {ref,defineEmits} from "vue";
	// const eio=ref('');
	// const emits = defineEmits(['initCompleted'])
	// const initCompleted=(e)=>{
	// 	emits('initCompleted', e)
	// }
	
	// let cloudurl="http://127.0.0.1:8880";
	// let appid="1";
	
	// const init=()=>{
	// 	fetch(`${cloudurl}/render/api/order`, {
	// 		method: "POST",
	// 		headers: { "Content-type": "application/json" },
	// 		body: JSON.stringify({appid:appid, resX:window.innerWidth, resY:window.innerHeight})
	// 	}).then(res => {
	// 		if (!res.ok) { throw Error(res.statusText) }
	// 		return res.json()
	// 	}).then(r => {
	// 		if(r.code==200){
	// 			let data=r.result;
	// 			eio.value=data.eio
				
	// 			console.log("eio",eio.value)
	// 			console.log('data',data)
	// 			var cloudRender=new CloudRender();
	// 			cloudRender.call("StartRenderCloud", data);
	// 			initCompleted(cloudRender);
	// 			window.cloudRender=cloudRender;
	// 		}
	// 	}).catch((error) => {
	// 		console.error('Error: ', error);
	// 		ElMessage.error(error)
	// 	});
	// }
	
	onMounted(() => {
		//init();
		//window.cloudRender=new CloudRender();
		//cloudRender.call("StartRenderCloud", {url:'ws://127.0.0.1:8881/33626278'});
	});
	
	 onDeactivated(()=>{
	 })
	 
	 onBeforeUnmount(()=>{
	 })
	 onUnmounted(()=>{
	 })
	 
	 onActivated(()=>{
	 })
	 onErrorCaptured(()=>{
	 })
	
</script>

<style lang="scss" >
canvas {
    image-rendering: crisp-edges;
    position: absolute;
}

video {
	position: absolute;
	width: 100%;
	height: 100%;
}

#player{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #101010;
}

#videoPlayOverlay{
	position: absolute;
	font-size: 1.8em;
	width: 100%;
	height: 100%;
	color: var(--colour2)
}

/* State for element to be clickable */
.clickableState{
	align-items: center;
	justify-content: center;
	display: flex;
	cursor: pointer;
}

/* State for element to show text, this is for informational use*/
.textDisplayState{
	align-items: center;
	justify-content: center;
	display: flex;
	cursor: pointer;
}

/* State to hide overlay, WebRTC communication is in progress and or is playing */
.hiddenState{
	display: none;
}

#playButton{
	display: inline-block;
	height: auto;
	z-index: 30;
	color: white;
}

img#playButton{
	max-width: 241px;
	width: 10%;
}

#freezeFrameOverlay {
	background-color: transparent;
}

.freezeframeBackground {
	background-color: #000 !important;
}

#overlay {
	width: 100%;
	height: 100%;
	z-index: 20;
	position: absolute;
	color: var(--colour2);
	pointer-events: none;
	overflow: hidden;
}

#overlay button {
	background-color: var(--colour7);
	border: 1px solid var(--colour7);
	color: var(--colour2);
	position: relative;
	width: 3rem;
	height: 3rem;
	padding: 0.5rem;
	text-align: center;
}

#fullscreen-btn {
	padding: 0.6rem !important;
}

#overlay button:hover {
	background-color: var(--colour3);
	border: 3px solid var(--colour3);
	transition: 0.25s ease;
	padding-left: 0.55rem;
    padding-top: 0.55rem;
}

#overlay button:active {
	border: 3px solid var(--colour3);
	background-color: var(--colour7);
	padding-left: 0.55rem;
    padding-top: 0.55rem;
}

#overlay img {
	width: 100%;
	height: 100%;
}
</style>
